<template>
  <q-page padding>
    <div class="items-center row q-gutter-md" style="margin-bottom: 10px">
      <q-input
        outlined
        dense
        clearable
        style="width: 15%"
        v-model="queryParams.empee_acct"
        :label="t('EmpeeAcct')"
      />
      <q-input
        outlined
        dense
        clearable
        style="width: 15%"
        v-model="queryParams.staff_name"
        :label="t('StaffName')"
      />
      <q-input
        outlined
        dense
        clearable
        style="width: 15%"
        v-model="queryParams.mobile"
        :label="t('Mobile')"
      />
      <q-select
        outlined
        dense
        clearable
        emit-value
        map-options
        style="width: 15%"
        v-model="queryParams.source"
        :label="t('Data') + t('Source')"
        :options="dictOptions.source"
      />
      <q-select
        outlined
        dense
        emit-value
        clearable
        map-options
        style="width: 15%"
        v-model="queryParams.status"
        :label="t('Status')"
        :options="dictOptions.statusOnOff"
      />
      <q-btn color="primary" @click="handleSearch" :label="$t('Search')" />
      <q-btn color="primary" @click="resetSearch" :label="$t('Reset')" />
    </div>
    <q-space />
    <q-table
      dense
      row-key="id"
      separator="cell"
      :rows="tableData"
      :columns="columns"
      v-model:pagination="pagination"
      :rows-per-page-options="pageOptions"
      :loading="loading"
      @request="onRequest"
    >
      <!-- <template v-slot:top>
        <q-btn
          color="primary"
          @click="showAddForm()"
          :label="$t('Add') + ' ' + $t('User')"
        />
      </template> -->

      <!-- 创建时间 -->
      <template v-slot:body-cell-created_at="props">
        <q-td :props="props">
          {{ showDateTime(props.row.created_at) }}
        </q-td>
      </template>

      <!-- 更新时间 -->
      <template v-slot:body-cell-updated_at="props">
        <q-td :props="props">
          {{ showDateTime(props.row.updated_at) }}
        </q-td>
      </template>

      <!-- 角色 -->
      <template v-slot:body-cell-org_role="props">
        <q-td :props="props">
          <div class="column items-center q-gutter-xs">
            <q-badge
              class="col"
              color="primary"
              v-for="(item, index) in props.row.org_role"
              :key="index"
            >
              <DcDictCell dictName="source" :dictCode="item.source" />
              {{ ": " + item.org.org_name + item.role.role_name }}
            </q-badge>
          </div>
        </q-td>
      </template>

      <!-- 数据来源 -->
      <template v-slot:body-cell-source="props">
        <q-td :props="props">
          <DcDictCell dictName="source" :dictCode="props.row.source" />
        </q-td>
      </template>

      <!-- 状态 -->
      <template v-slot:body-cell-status="props">
        <q-td :props="props">
          <DcDictCell dictName="statusOnOff" :dictCode="props.row.status" />
        </q-td>
      </template>

      <!-- 操作 -->
      <template v-slot:body-cell-actions="props">
        <q-td :props="props">
          <div class="q-gutter-xs">
            <!-- <q-btn
              color="primary"
              size="sm"
              @click="showEditForm(props.row)"
              :label="$t('Edit')"
            /> -->
            <q-btn
              color="primary"
              size="sm"
              @click="resetPasswordToDefault(props.row.id)"
              :label="$t('ResetPassword')"
            />
            <q-btn
              color="green"
              size="sm"
              @click="showUserOrgRole(props.row)"
              :label="$t('Allocate') + $t('Org') + $t('Role')"
            />
          </div>
        </q-td>
      </template>
      <template v-slot:loading>
        <q-inner-loading :showing="loading">
          <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
      </template>
    </q-table>
    <UserOrgRoleDialog ref="userOrgRoleDialog" @handleFinish="handleFinish" />
  </q-page>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
//import UserRecordDetail from "./UserRecordDetail.vue";
import { FormatDateTime } from "src/utils/date";
import { useQuasar } from "quasar";
import { postAction } from "src/utils/requestAction";
import UserOrgRoleDialog from "./UserOrgRoleDialog.vue";

const $q = useQuasar();
const { t } = useI18n();
const url = {
  list: "user/get-user-list",
  delete: "user/delete-user-by-id",
  resetPasswordToDefault: "user/reset-password-to-default-by-id",
};

const columns = computed(() => {
  return [
    {
      name: "empee_acct",
      align: "center",
      label: t("EmpeeAcct"),
      field: "empee_acct",
    },
    {
      name: "staff_name",
      align: "center",
      label: t("StaffName"),
      field: "staff_name",
    },
    {
      name: "staff_id",
      align: "center",
      label: t("StaffId"),
      field: "staff_id",
    },
    {
      name: "mobile",
      align: "center",
      label: t("Mobile"),
      field: "mobile",
    },
    {
      name: "certi_nbr",
      align: "center",
      label: t("CertiNbr"),
      field: "certi_nbr",
    },
    {
      name: "org_role",
      align: "center",
      label: t("Org") + t("Role"),
    },
    {
      name: "status",
      align: "center",
      label: t("Status"),
      field: "status",
    },
    {
      name: "source",
      align: "center",
      label: t("Data") + t("Source"),
      field: "source",
    },
    {
      name: "actions",
      align: "center",
      label: t("Actions"),
      field: "actions",
    },
  ];
});

const {
  pagination,
  queryParams,
  pageOptions,
  DcDictCell,
  dictOptions,
  loading,
  tableData,
  //recordDetailDialog,
  showAddForm,
  showEditForm,
  onRequest,
  getTableData,
  handleSearch,
  resetSearch,
  handleFinish,
  handleDelete,
} = useTableData(url);

onMounted(() => {
  getTableData();
});

const showDateTime = computed(() => {
  return (datetime) => {
    return FormatDateTime(datetime);
  };
});

const resetPasswordToDefault = async (userId) => {
  $q.dialog({
    title: t("Confirm"),
    message: t("Confirm") + t("ResetPassword") + "?",
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    const res = await postAction(url.resetPasswordToDefault, {
      id: userId,
    });
    if (res.code === 1) {
      $q.notify({
        type: "positive",
        message: res.message,
      });
    } else {
      $q.notify({
        type: "negative",
        message: t("ResetPassword") + t("Error") + ": " + res.message,
      });
    }
    getTableData();
  });

  // await postAction(url.resetPassword, { id: userId }).then(() => {
  //   $q.dialog.alert({
  //     message: t("ResetPasswordSuccess"),
  //     color: "positive",
  //   });
  // });
};

const userOrgRoleDialog = ref(null);
const showUserOrgRole = (row) => {
  userOrgRoleDialog.value.show(row);
};
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "UserComp",
});
</script>
